<template>
  <div class="upload">
    <div class="link mb-10">
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <el-image v-show="state.cover" class="preview" :src="state.cover" fit lazy>
            <template #error>
              <el-image
                src="https://img2.baidu.com/it/u=851925479,3130732440&fm=26&fmt=auto"
              ></el-image>
            </template>
          </el-image>
          <el-upload
            v-show="!state.cover"
            ref="upload"
            action
            accept="image/jpeg, image/gif, image/png"
            :limit="1"
            :auto-upload="true"
            :file-list="fileList"
            list-type="picture-card"
            :before-upload="beforeUpload"
            :http-request="httpRequest"
          >
            <el-button size="small" type="primary">选取文件</el-button>
            <template #file="{ file }">
              <div class="preview">
                <img class="el-upload-list__item-thumbnail" :src="file.url" />
                <span class="el-upload-list__item-actions">
                  <!-- <span class="el-upload-list__item-preview">
              <i class="el-icon-zoom-in"></i>
                  </span>-->
                  <span class="el-upload-list__item-delete" @click="onRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </template>
            <template #tip>
              <div class="el-upload__tip">只能上传 jpg/png 文件,最大5M</div>
            </template>
          </el-upload>
        </el-col>

        <el-col :span="6" :offset="0">
          <el-input size="mini" v-model="state.imgurl" placeholder="请输入图片链接" clearable>
            <template #append>
              <el-button type="primary" size="small" @click="loadImg">加载图片</el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { reactive, onMounted, defineProps, ref, defineEmit } from 'vue'
import { uploadImg } from '../api/upload'

const upload = ref()

/**
 *  props
 */

const props = defineProps({
  src: String,
})

const emit = defineEmit(['srcChange'])

onMounted(() => {
  state.cover = props.src
})

/**
 *  state
 */

let fileList: any = ref([])

const state = reactive<any>({
  imgurl: '',
  cover: '',
})

/**
 *  methods
 */

// 上传文件
const beforeUpload = (file: File) => {
  let FileExt = file.name.replace(/.+\./, '')
  if (!['jpg', 'jpge', 'png', 'gif'].includes(FileExt.toLowerCase())) {
    ElMessage({
      type: 'warning',
      message: '请上传后缀名为jpg、png、gif的附件！',
    })
    return false
  }
}

// 上传文件
const httpRequest = async (params: any) => {
  // 1.发起上传请求
  // uploadImg(params.file).then((res) => {
  //   state.cover = res.imgUrl;
  // });
}
// 删除文件
const onRemove = (file: File) => {
  upload.value.clearFiles()
}

const loadImg = () => {
  state.cover = state.imgurl
  emit('srcChange', state.cover)
}
</script>

<style lang="scss" scoped>
.upload {
  display: block;
}
</style>
